<template>
  <!-- 搜索弹出层 -->
  <div class="search-popup">
    <!-- 搜索栏 -->
    <van-search
      v-model="searchVal"
      show-action
      :placeholder="placeVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />

    <!-- 底下展示3个界面之一 ，但不涉及路由跳转，做成组件-->
    <HistoryHot
      v-if="blockShow == 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagClick="tagClick"
    />
    <SearchTipsList
      v-else-if="blockShow == 2"
      :searchTipsListData="searchTipsListData"
      @tagClick="tagClick"
    />
    <SearchProductList
      v-else-if="blockShow == 3"
      :productsListData="productsListData"
      :filterCategory="filterCategory"
      @categoryChange="categoryChange"
      @priceChange="priceChange"
    />
  </div>
</template>

<script>
import HistoryHot from "@/components/search/HistoryHot";
import SearchTipsList from "@/components/search/SearchTipsList";
import SearchProductList from "@/components/search/SearchProductList";
import { mapMutations } from "vuex";
import {
  GetHishotData,
  GetSearchTipsData,
  GetGoodsListData,
} from "@/request/api";
export default {
  components: {
    HistoryHot,
    SearchTipsList,
    SearchProductList,
  },
  data() {
    return {
      // 搜索框的值，用户输入的值
      searchVal: "",
      // 搜索框中的提示热词
      placeVal: "",
      // blockShow变量用来控制切换搜索页面对应的界面
      // 1 表示 历史和热门界面
      // 2 表示 搜索提示列表
      // 3 表示 搜索产品列表
      blockShow: 1,
      // 历史记录的数组
      historyKeywordList: [],
      // 热门搜索数组
      hotKeywordList: [],
      // 搜索提示列表的数据
      searchTipsListData: [],
      // 搜索产品列表的数据
      productsListData: [],
      // 产品列表的分类数据
      filterCategory: [],
      // 排列顺序，desc表示价格由高到低，asc表示价格由低到高
      order: "desc",
      // sort 可以是id或price 排序方式
      sort: "id",
      // 分类id
      categoryId: 0,
      // 防抖定时器
      timer: null,
    };
  },
  created() {
    // 请求历史记录和热门搜索数据
    GetHishotData().then((res) => {
      let { defaultKeyword, historyKeywordList, hotKeywordList } = res.data;

      this.placeVal = defaultKeyword.keyword;
      this.historyKeywordList = historyKeywordList;
      this.hotKeywordList = hotKeywordList;
    });
  },
  methods: {
    tagClick(value) {
      this.searchVal = value;
      this.onSearch(value);
    },
    priceChange(value) {
      this.sort = "price";
      this.order = value;
      // 发送搜索请求
      this.onSearch(this.searchVal);
    },
    categoryChange(id) {
      this.categoryId = id;
      // 发送搜索请求
      this.onSearch(this.searchVal);
    },
    ...mapMutations({
      chanIsShowShadow: "showshadow/chanIsShowShadow",
    }),

    onSearch(value) {
      // value就是用户输入的内容
      // 回车之后执行这里的代码
      // 搜索的时候
      this.blockShow = 3;
      // 发起搜索请求
      GetGoodsListData({
        keyword: value,
        // 细化搜索请求：为后面点击 价格由高到低(低到高)，或者点击分类选项 发起请求做准备
        order: this.order, // 告诉后端是由高到低或者低到高
        sort: this.sort, // 告诉后端按照id排序还是price来排序
        categoryId: this.categoryId, // 请求的分类id
      }).then((res) => {
        // console.log(res.data);
        // 解构的方式
        let { data, filterCategory } = res.data;
        this.productsListData = data;

        // 后端给我们的数据：
        //   [{id: 0, name: "全部", checked: true},
        // {id: 1005001, name: "餐厨", checked: false},
        // {id: 1005000, name: "居家", checked: false},
        // {id: 1008000, name: "配件", checked: false},]

        // 而我们需要的数据格式如下：
        // [
        //   { text: '全部', value: 'a' ,checked: false},
        //   { text: '居家', value: 'b' ,checked: false},
        // ]
        //  把name处理成 text，   把id处理成  value， 但是数据还是原来的数据
        let newArr = filterCategory.map((item) => {
          // return 就是新数组每个元素的样子
          return { text: item.name, value: item.id, checked: item.checked };
        });

        this.filterCategory = newArr;
        // 总结经验 ： 有时候，后端给我们的数据跟我们需要的格式有点不一样，我们就需要把后端给我们的数据处理成我们自己想要的格式。
      });
    },
    onCancel() {
      this.$router.go(-1);
      this.chanIsShowShadow(false);
      // this.$router.push("/home")
    },
    onInput(value) {
      // 防抖 在每一次执行操作的时候，先判断定时器启动了没有，如果启动了，就应该先清除定时器
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        // value 就是用户输入的内容
        // 用户正在输入的时候，要切换到第2个界面
        this.blockShow = 2;
        // 发送请求，请求和用户输入相关的提示
        // console.log(value);
        GetSearchTipsData({
          keyword: value,
        }).then((res) => {
          // console.log(res.data);
          this.searchTipsListData = res.data;
        });
      }, 500);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.search-popup {
  position: absolute;
  width: 100%;
  min-height: 100%;
  top: 0;
  background-color: #efefef;
  z-index: 100;
}
</style>